<template>
    <div>

        <youhuiswiper v-if="list.length">
            <div class="swiper-slide" v-for="data in list" :key="data">
                <img :src="data" alt="" class="images">
            </div>
        </youhuiswiper>
        <goodsaction></goodsaction>
        <youhuicade></youhuicade>
        <div class="jingdong">
        <ul>
            <li><van-icon name="passed" size="12px" color="red"/>京东商品</li>
            <li><van-icon name="passed" size="12px" color="red"/>品质保证</li>
            <li><van-icon name="passed" size="12px" color="red"/>多快好省</li>
            <li><van-icon name="passed" size="12px" color="red"/>售后无忧</li>
        </ul>
        </div>

        <div v-for="data in list" :key="data">
            <img v-lazy="data" alt="" class="imgg">
        </div>

    </div>
</template>
<script>
import http from '@/util/http.js'
import youhuiswiper from '@/views/youhuis/youhuiswiper'
import goodsaction from '@/views/youhuis/goodsaction'
import youhuicade from '@/views/youhuis/youhuicade'
import Vue from 'vue'
import { Icon, Lazyload } from 'vant'

Vue.use(Icon).use(Lazyload)

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true
})
export default {
  components: {
    youhuiswiper,
    goodsaction,
    youhuicade
  },
  data () {
    return {
      list: []
    }
  },
  mounted () {
    // console.log('id', this.$route.query.id)
    http({
      url: `/heihei/api/union/product/product_detail?c=h5&s=20000&t=1605160945678&v=1.0&skuId=${this.$route.query.id}`
    }).then(res => {
      this.list = res.data.data.imageList
      // console.log(this.list)
    })
  }
}
</script>
<style lang="scss" scoped>
    div{
        width: 100%;
        height: 100%;

    }
    .images{
        width: 100%;
        height:320px;
        border-bottom: 1px solid #ccc;
    }
    .jingdong{

        height: 50px;
        border-bottom: 8px solid rgb(240, 240, 240);
    }
    ul{
        display: flex;
        width: 95%;
        margin: 0 auto;
        text-align: center;
        border-top: 1px solid #ccc;
        font-size: 12px;
    }
    .jingdong li{
        flex: 1;
        display: inline;
        line-height: 50px;
    }
    .imgg{
        width: 100%;
        height:320px;

    }
</style>
